<template>
    <div>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
        <van-tabbar v-model="active" active-color="#ee0a24" @change="Redirect">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const active: Number = ref(0);
const Redirect = () => {
    if (active.value === 0) {
        router.push('/Welcome')
    } else if (active.value === 1) {
        router.push('/Classification')
    } else if (active.value === 2) {
        router.push('/Shopping')
    } else if (active.value === 3) {
        router.push('/My')
    }
}
onMounted(() => {
    Redirect()
})

</script>

<style scoped></style>